<template>
    <view>
        <!-- pages/showarticle/showarticle.wxml -->
        <view class="topbox">
            <cu-custom :isShowicon="true" :isBack="true">
                <view slot="backText">小剧场</view>
                <view slot="content"></view>
            </cu-custom>
        </view>
        <view class="text-xl padding-lr-sm text-center text-bold text-black text-content padding-top-sm">普通人表演短剧的6个技巧</view>
        <view class="flex align-center justify-between margin-sm">
            <view class="text-gray">投稿作者：小编</view>
            <view class="text-gray">阅读量：5440</view>
        </view>

        <view class="margin-sm margin-top text-sm text-content text-black">
            <rich-text :nodes="content"></rich-text>
        </view>
    </view>
</template>

<script>
// pages/showarticle/showarticle.js
export default {
    data() {
        return {
            content: `<h2>这里是标题</h2><p>这里是段落内容体系</p>用过vue 的都知道vue 有个 v-html 属性，可以准换html格式并且展示；
      但是微信小程序提供的方法是一个新的标签【基础内容 /rich-text】（微信文档传送门） ；
      使用方法很简单`
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {}
};
</script>
<style>
/* pages/showarticle/showarticle.wxss */
page {
    background: #ffffff;
    padding-bottom: 120rpx;
    padding-top: 120rpx;
}
</style>
